@import "modules/base";

$light-theme: (
  ('keyword', '#00aaff'),
  ('operator', '#f95faa'),
  ('property', '#75de00'),
  ('variable', '#75de00'),
  ('string', '#eeba00'),
  ('comment', '#bbbbbb')
);

$size: 13px;
$line-height: round(($size / 2)*2.69);
$gutter-width: 3.5em;
$padding: 13px;
$line-number-size: round(($size / 2)*1.53);

pre {

  &.al-snippet {
    box-sizing: border-box;
    word-break: initial;
    word-wrap: initial;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: initial !important;
    padding: $padding*2 $padding*2 $padding*2 $padding*4.5;
    position: relative;
    line-height: $line-height;
    font-size: $size;
    white-space: pre-line;

    &::before {
      content: '1 2 3 4 5 6 7 8';
      display: block;
      padding: $padding*2 0  !important;
      position: absolute;
      width: $gutter-width;
      background: #FDFDFD;
      border-right: 1px solid rgba(black, 0.1);
      top: 0;
      left: 0;
      z-index: 9;
      height: 100%;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      word-spacing: $gutter-width;
      white-space: pre-line;
      line-height: $line-height*1.08;
      font-size:  $line-number-size*1.11;
      text-align: center;
      color: #BBBBBB;
    }

    code {
      margin: 0;
      padding: 0;
      font-weight: 500;
      white-space: inherit;
      font-family: 'Roboto Mono', roboto, sans-serif;
      font-size: $size;
    }

    // Theme
    &[data-snippet-theme="light"] {
      border: solid 1px #D7D9DE !important;
      background-color: $white !important;

      // Main text color
      color: #666666;

      // Now, let' give it colors
      // Namespace : sn-
      @each $name, $color in $light-theme {
        .sn-#{$name} {
          color: #{$color};
        }
      }
    }
  }
}


* {
  background: red !important;
}
